@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
:root { --font: "Poppins", sans-serif; --zero: 0; --rel: relative; --abs: absolute; }
body { margin: var(--zero); padding: var(--zero); font-family: var(--font); text-transform: uppercase; user-select: none; overflow: hidden;}
.qb-idcard {position: var(--abs);width: 45vh;height: 26vh;right: 3vh;top: 25vh;border: 0.4vh solid rgb(255 255 255 / 16%);border-radius: 1.3vh;}
.qb-idcard .header { text-align: center; font-size: 2vh; font-weight: 600; width: 50vh; }
.qb-idcard .header img {width: 3.5vh;margin-left: -1.2vh;margin-top: 1vh;}
.qb-idcard .header span:first-of-type {position: var(--rel);top: -1vh;left: -3vh;}
.qb-idcard .header span {position: var(--rel);top: -1vh;left: 2vh;}
.qb-idcard .icon { position: absolute; width: 15vh; height: 15vh; left: 3vh; }
.qb-idcard .icon #seximg {width: 13vh;border: 0.1vh solid rgb(0 0 0 / 19%);border-radius: 1vh;margin-top: 2vh;}
.qb-idcard .text { position: absolute; width: 25vh; height: 25vh; left: 14vh; top: 4vh; }
.qb-idcard .text ul li { margin: 0.3vh; list-style-type: none; font-size: 1vh; text-align: right; font-weight: 900; border-bottom: 0.1vh solid rgba(0, 0, 0, 0.07); }
.qb-idcard .text ul span.info { font-size: 1vh; font-weight: 800; padding: 2vh; }
.slidein { animation: 0.2s ease 0s 1 normal forwards running slidein; }
.slideout { animation: 0.3s ease 0s 1 normal forwards running slideout; }
@keyframes slidein { 
  0% { right: 7vh; }
  100% { right: 1vh; }
}
@keyframes slideout { 
  0% { right: 1vh; }
  100% { right: 7vh; }
}